<!-- 下拉选择组件 -->
<template>
  <div class="container">
    <div :class="['label', fontSize]" @click="!disabled && (show = !show)">
      <span>{{ nowLabel }}</span>
      <img src="@/assets/images/drop-down.png" alt="" :class="['icon', { 'icon-rotate': show }]" />
    </div>
    <div :class="['select-list', show ? 'show' : 'hidden']">
      <div
        v-for="item in filterList"
        :key="item.value"
        :class="['item', { active: item.value === value }]"
        @click="handleSelectData(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseSelect",
  props: {
    disabled: Boolean,
    value: String,
    list: {
      type: Array,
      default: () => [
        { label: "日", value: "day" },
        { label: "月", value: "month" },
        { label: "年", value: "year" },
      ],
    },
    fontSize: {
      type: String,
      default: "fz-14",
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    nowLabel() {
      const item = this.list.length && this.list.find((item) => item.value === this.value);
      return item.label;
    },
    filterList() {
      return this.list.filter((item) => item.value);
    },
  },
  methods: {
    handleSelectData(item) {
      this.show = !this.show;
      this.$emit("input", item.value);
      this.$emit("select", { label: item.label, value: item.value });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  position: relative;
  cursor: pointer;
}
.label {
  img {
    margin-left: 8px;
    width: 24px;
  }
  .icon {
    transition: transform 0.3s;
    transform: rotate(0deg);
    &.icon-rotate {
      transform: rotate(180deg);
    }
  }
}
.fz-14 {
  font-size: 14px;
}
.fz-18 {
  font-size: 18px;
}
.select-list {
  position: absolute;
  z-index: 999;
  margin-top: 10px;
  animation: all 1s;
  background-color: #0d151d;
  border-radius: 5px;
  color: #fff;
  max-height: 200px;
  overflow: auto;
  .item {
    padding: 0 20px;
    word-break: keep-all;
    overflow: hidden;
    max-height: 0;
    line-height: 38px;
    -webkit-transition: max-height 0.3s ease;
    -moz-transition: max-height 0.3s ease;
    -o-transition: max-height 0.3s ease;
    transition: max-height 0.3s ease;
    font-size: 12px;
    &:hover {
      background-color: rgba(0, 145, 255, 0.4);
    }
  }
  &.show {
    display: inline-block;
    .item {
      max-height: 80px;
    }
  }
  .active {
    color: #0091ff;
  }
}
</style>
